<div class="container-fluid report-detail-data" id="dispatcher-detail-{{ dispatcher_detail.id }}" data-element-type="CASE" style="display: none;">
  <div class="row">
    <div class="col-6">
      <h4>案例名称: {{ dispatcher_detail.element_name }}</h4>
      <div class="d-flex">
        <p>开始时间: {{ dispatcher_detail.start_time }}&emsp;</p>
        <p>调度编号: {{ dispatcher_detail.dispatcher_id }}&emsp;</p>
        <p>元素编号: {{ dispatcher_detail.element_id }}&emsp;</p>
      </div>
    </div>
    <div class="col-6">
      <h4>
        <span class="badge badge-light">结果:</span>
        {% if report_case_data.result == REPORT_RESULT.ERROR %}
          {% set badge_result_class = 'badge-error' %}
        {% elif report_case_data.result == REPORT_RESULT.SUCCESS %}
          {% set badge_result_class = 'badge-success' %}
        {% elif report_case_data.result == REPORT_RESULT.FAILURE %}
          {% set badge_result_class = 'badge-danger' %}
        {% endif %}
        <span class="badge {{ badge_result_class }}">{{ report_case_data.result }}</span>
      </h4>
    </div>
  </div>
  <div class="accordion" id="accordion-request-{{ dispatcher_detail.id }}">
    <div class="card">
      <div class="card-header">
        <div class="mb-0 row">
          <div class="col-3">
            <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#collapse-request-{{ dispatcher_detail.id }}" >
              请求
            </button>
          </div>
          <div class="col-9 container-fluid">
            <div class="row">
              <div class="col-6">
                <span class="badge badge-light">请求类型:</span>
                <span class="badge badge-pill badge-primary">{{ report_case_data.case_type }}</span>
                <span class="case-method">{{ method }}</span>
                <br>
                <span class="badge badge-light">耗时:</span>
                <span class="badge badge-pill badge-primary">{{ report_case_data.elapsed_time }}ms</span>
              </div>
              <div class="col-6">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="collapse-request-{{ dispatcher_detail.id }}" class="collapse show" data-parent="#accordion-request-{{ dispatcher_detail.id }}">
        <div class="card-body p-1">
          <div class="row container-fluid">
            <ul class="col-8 nav nav-pills" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#case-request-body-{{ dispatcher_detail.id }}" role="tab">请求体</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#case-request-header-{{ dispatcher_detail.id }}" role="tab">请求头</a>
              </li>
            </ul>
            <div class="col-4 d-flex justify-content-end">
              <div class="btn-group btn-group-sm btn-group-toggle p-2" data-toggle="buttons">
                <label class="btn btn-outline-secondary">
                  <input type="radio" name="request-code-{{ dispatcher_detail.id }}" id="radio-default-request-code-{{ dispatcher_detail.id }}" autocomplete="off"> 默认
                </label>
                <label class="btn btn-outline-secondary active">
                  <input type="radio" name="request-code-{{ dispatcher_detail.id }}" id="radio-beautify-request-code-{{ dispatcher_detail.id }}"  autocomplete="off" checked> 美化
                </label>
              </div>
            </div>
          </div>
          <div class="tab-content pt-0">
            <div class="tab-pane fade show active" id="case-request-body-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-request-body" id="ace-request-body-{{ dispatcher_detail.id }}">{{ report_case_data.request_body }}</div>
            </div>
            <div class="tab-pane fade" id="case-request-header-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-request-header" id="ace-request-header-{{ dispatcher_detail.id }}">{{ report_case_data.request_header }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion mt-2" id="accordion-response-{{ dispatcher_detail.id }}">
    <div class="card">
      <div class="card-header">
        <div class="mb-0 row">
          <div class="col-3">
            <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#collapse-response-{{ dispatcher_detail.id }}" >
              响应
            </button>
          </div>
          <div class="col-9 container-fluid">
            <div class="row">
              <div class="col-6">
                <span class="badge badge-light">期望结果:</span>
                {% if  case_expectation_result.total_count > 0 %}
                  {% if case_expectation_result.result %}
                  <span class="badge badge-success">成功</span>
                  {% set pill_expectation_result_class = 'success' %}
                  {% else %}
                  <span class="badge badge-danger">失败</span>
                  {% set pill_expectation_result_class = 'failure' %}
                  {% endif %}
                {% else %}
                  <span class="badge badge-dark">未设置期望</span>
                  {% set pill_expectation_result_class = '' %}
                {% endif %}
                <br>
                <span class="badge badge-light">明细:</span>
                <span class="badge badge-pill badge-primary">总数 {{ case_expectation_result.total_count }}</span>
                <span class="badge badge-pill badge-success">成功 {{ case_expectation_result.success_count }}</span>
                <span class="badge badge-pill badge-danger">失败 {{ case_expectation_result.failure_count }}</span>
              </div>
              <div class="col-6">
                <span class="badge badge-light">后处理脚本结果:</span>
                {% if post_processor_result %}
                <span class="badge badge-success">成功</span>
                {% else %}
                <span class="badge badge-danger">失败</span>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="collapse-response-{{ dispatcher_detail.id }}" class="collapse show" data-parent="#accordion-response-{{ dispatcher_detail.id }}">
        <div class="card-body p-1">
          <div class="row container-fluid">
            <ul class="col-9 nav nav-pills" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#case-response-body-{{ dispatcher_detail.id }}" role="tab">响应体</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#case-response-header-{{ dispatcher_detail.id }}" role="tab">响应头</a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ pill_expectation_result_class }}" id="nav-link-case-expectation-{{ dispatcher_detail.id }}" data-toggle="pill" data-dispatcher-detail-id="{{ dispatcher_detail.id }}" href="#case-expectation-{{ dispatcher_detail.id }}" role="tab">期望</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#case-preprocessor-script-{{ dispatcher_detail.id }}" role="tab">预处理脚本</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#case-postprocessor-script-{{ dispatcher_detail.id }}" role="tab">后处理脚本</a>
              </li>
              {% set pill_post_processor_script_result_class = '' %}
              {% if post_processor_result %}
                {% set pill_post_processor_script_result_class = 'success' %}
              {% else %}
                {% set pill_post_processor_script_result_class = 'failure' %}
              {% endif %}
              <li class="nav-item">
                <a class="nav-link {{ pill_post_processor_script_result_class }}" data-toggle="pill" href="#case-post-processor-script-info-{{ dispatcher_detail.id }}" role="tab">后处理结果信息</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#case-log-{{ dispatcher_detail.id }}" role="tab">日志</a>
              </li>
            </ul>
            <div class="col-3 d-flex justify-content-end">
              <div class="btn-group btn-group-sm btn-group-toggle p-2" data-toggle="buttons">
                <label class="btn btn-outline-secondary">
                  <input type="radio" name="response-code-{{ dispatcher_detail.id }}" id="radio-default-response-code-{{ dispatcher_detail.id }}" autocomplete="off"> 默认
                </label>
                <label class="btn btn-outline-secondary active">
                  <input type="radio" name="response-code-{{ dispatcher_detail.id }}" id="radio-beautify-response-code-{{ dispatcher_detail.id }}"  autocomplete="off" checked> 美化
                </label>
              </div>
            </div>
          </div>
          <div class="tab-content pt-0">
            <div class="tab-pane fade show active" id="case-response-body-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-response-body" id="ace-response-body-{{ dispatcher_detail.id }}">{{ report_case_data.response_body }}</div>
            </div>
            <div class="tab-pane fade" id="case-response-header-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-response-header" id="ace-response-header-{{ dispatcher_detail.id }}">{{ report_case_data.response_header }}</div>
            </div>
            <div class="tab-pane fade" id="case-expectation-{{ dispatcher_detail.id }}" role="tabpanel">
              <div id="table-expectation-{{ dispatcher_detail.id }}" class="d-flex justify-content-center">
                <div id="div-table-expectation-spinner-{{ dispatcher_detail.id }}" class="spinner-border text-primary m-5" role="status">
                  <span class="sr-only">加载中Loading...</span>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="case-preprocessor-script-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-preprocessor-script" id="ace-preprocessor-script-{{ dispatcher_detail.id }}">{{ report_case_data.preprocessor_script }}</div>
            </div>
            <div class="tab-pane fade" id="case-postprocessor-script-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-postprocessor-script" id="ace-postprocessor-script-{{ dispatcher_detail.id }}">{{ report_case_data.postprocessor_script }}</div>
            </div>
            <div class="tab-pane fade" id="case-post-processor-script-info-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-post-processor-script-info" id="ace-post-processor-script-info-{{ dispatcher_detail.id }}">{{ report_case_data.postprocessor_failure_message }}</div>
            </div>
            <div class="tab-pane fade" id="case-log-{{ dispatcher_detail.id }}" role="tabpanel">
              <div class="container-fluid ace-case-log" id="ace-case-log-{{ dispatcher_detail.id }}">{{ report_case_data.log }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>